<template>
  <div v-if="showMonitor" class="fixed bottom-4 right-4 bg-background-800 text-text-primary p-4 rounded-lg shadow-lg z-[75] max-w-sm border border-background-700 animate-fade-in">
    <h3 class="text-sm font-semibold mb-2 text-text-primary">全局性能监控</h3>
    <div class="space-y-1 text-xs">
      <div class="text-text-secondary">当前页面: <span class="text-text-primary">{{ currentPage }}</span></div>
      <div class="text-text-secondary">加载状态: <span class="text-text-primary">{{ loadingStatus }}</span></div>
      <div class="text-text-secondary">路由切换次数: <span class="text-text-primary">{{ routeChangeCount }}</span></div>
      <div class="text-text-secondary">平均加载时间: <span class="text-text-primary">{{ averageLoadTime }}ms</span></div>
      <div class="text-text-secondary">页面加载时间: <span class="text-text-primary">{{ pageLoadTime }}ms</span></div>
      <div class="text-text-secondary">电影加载时间: <span class="text-text-primary">{{ movieLoadTime }}ms</span></div>
      <div class="text-text-secondary">缓存命中率: <span class="text-text-primary">{{ cacheHitRate }}%</span></div>
      <div class="text-text-secondary">内存使用: <span class="text-text-primary">{{ memoryUsage }}MB</span></div>
    </div>
    <div class="mt-2 flex gap-2">
      <UiButton 
        @click="uiStore.setPerformanceMonitorVisible(false)"
        variant="ghost"
        size="sm"
        class="text-xs text-text-muted hover:text-text-primary p-0 h-auto"
      >
        关闭
      </UiButton>
      <UiButton 
        @click="resetStats"
        variant="ghost"
        size="sm"
        class="text-xs text-text-muted hover:text-text-primary p-0 h-auto"
      >
        重置
      </UiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useLoadingStore } from '../../store/useLoadingStore'
import { useUiStore } from '../../store/useUiStore'
import { storeToRefs } from 'pinia'
import { UiButton } from './index'

const route = useRoute()
const loadingStore = useLoadingStore()
const uiStore = useUiStore()
const { isLoading } = storeToRefs(loadingStore)

const showMonitor = computed(() => uiStore.isPerformanceMonitorVisible)
const currentPage = ref('')
const loadingStatus = ref('空闲')
const routeChangeCount = ref(0)
const averageLoadTime = ref(0)
const pageLoadTime = ref(0)
const movieLoadTime = ref(0)
const cacheHitRate = ref(0)
const memoryUsage = ref(0)

// 性能统计
const loadTimes: number[] = []
let loadStartTime = 0

// 监听路由变化
watch(() => route.path, (newPath) => {
  currentPage.value = newPath
  routeChangeCount.value++
  
  if (isLoading.value) {
    loadStartTime = performance.now()
    loadingStatus.value = '加载中...'
  }
})

// 监听加载状态变化
watch(isLoading, (newLoading) => {
  if (!newLoading && loadStartTime > 0) {
    const loadTime = performance.now() - loadStartTime
    loadTimes.push(loadTime)
    
    // 计算平均加载时间
    averageLoadTime.value = Math.round(loadTimes.reduce((a, b) => a + b, 0) / loadTimes.length)
    
    loadingStatus.value = '完成'
    loadStartTime = 0
    
    // 模拟缓存命中率（实际项目中应该从真实的缓存系统获取）
    cacheHitRate.value = Math.min(100, Math.round(Math.random() * 30 + 20))
  } else if (newLoading) {
    loadingStatus.value = '加载中...'
  }
})

// 更新性能数据
const updatePerformanceData = () => {
  // 页面加载时间
  if (performance.timing) {
    pageLoadTime.value = performance.timing.loadEventEnd - performance.timing.navigationStart
  }
  
  // 内存使用情况
  if ('memory' in performance) {
    memoryUsage.value = Math.round((performance as any).memory.usedJSHeapSize / 1024 / 1024)
  }
  
  // 模拟电影加载时间
  movieLoadTime.value = Math.random() * 500 + 100
}

const resetStats = () => {
  loadTimes.length = 0
  averageLoadTime.value = 0
  routeChangeCount.value = 0
  cacheHitRate.value = 0
  pageLoadTime.value = 0
  movieLoadTime.value = 0
  memoryUsage.value = 0
}

onMounted(() => {
  currentPage.value = route.path
  
  // 开发环境下默认显示监控
  if (import.meta.env.DEV && !uiStore.isPerformanceMonitorVisible) {
    uiStore.setPerformanceMonitorVisible(true)
  }
  
  updatePerformanceData()
  
  // 定期更新数据
  setInterval(updatePerformanceData, 2000)
})
</script> 